<template>
	<view class="container">
	
		<view class="content">
			<view class="content-head d-rn  d-jb">
				<view class="content-head-left d-rn ">
					<view class="content-head-left-image">
						<image :src="user_info.image" mode=""></image>
					</view>
					<view class="content-head-left-word d-cw">
						<text>已累计签到 <text>{{user_info.days || '0'}}</text> 天</text>
						<text v-if="user_info.days==6" class="mt10">明日签到可获得{{qiandao_rule.leijia || '0'}}积分</text>
						<text v-else class="mt10">明日签到可获得{{qiandao_rule.first || '0'}}积分</text>
					</view>
				</view>
				<view class="content-head-right d-rn d-ac d-jc">
					<image src="@/static/points/jifen.png" mode=""></image>
					<text class="ml10">{{user_info.jifen}}</text>
				</view>
			</view>
			<view class="big">
				<view class="content-ling">
					<view class="content-ling-title">
						<text>连续签到领好礼</text>
					</view>
					<view class="content-ling-list d-rn d-ac">
						<view class="content-ling-list-top d-cw d-ac d-jc " @click="qiandao(index)" v-if="index<6"
							v-for="(item,index) in 7" :key="item" :class="(user_info.days>=index+1)?'active':'outactive'">
							<text v-if="index==0">第1天</text>
							<text v-if="index==1">第2天</text>
							<text v-if="index==2">第3天</text>
							<text v-if="index==3">第4天</text>
							<text v-if="index==4">第5天</text>
							<text v-if="index==5">第6天</text>
							<image v-if="user_info.days==index+1" src="@/static/points/jifen.png" mode=""></image>
							<image v-else src="@/static/points/jifen.png" mode=""></image>

							<text v-if="user_info.days>=index+1">已签到</text>
							<text v-else="">{{qiandao_rule.first || ''}}积分</text>
						</view>
						<view class="content-ling-list-one outactive d-rn d-ac d-jc" @click="qiandao(6)"
							:class="info.days==7?'active':'outactive'">
							<view class="content-ling-list-one-left d-cw d-jc">
								<text>第7天</text>
								<text>多签多得</text>
								<text>{{qiandao_rule.leijia || '0'}}积分</text>
							</view>
							<view class="content-ling-list-one-right">
								<!-- <image src="@/static/points/day7-jifen.png" mode=""></image> -->
							</view>
						</view>
					</view>
				</view>
				<view class="content-ling">
					<view class="content-ling-title lianxu">
						<text>做任务送积分</text>
					</view>
					<view class="content-ling-two">
						<view class="content-ling-two-top d-rn d-ac d-jb">
							<view class="content-ling-two-top-left d-rn d-ac">
								<view class="content-ling-two-top-left-image">
									<image src="@/static/points/leji.png" mode=""></image>
								</view>
								<view class="content-ling-two-top-left-word d-cw">
									<text>累积签到</text>
									<text>连续签到{{qiandao_rule.day}}天额外获得{{qiandao_rule.leijia}}积分</text>
								</view>
							</view>

						</view>
						<view class="content-ling-two-top d-rn d-ac d-jb">
							<view class="content-ling-two-top-left d-rn d-ac">
								<view class="content-ling-two-top-left-image">
									<image src="@/static/points/buy-ico.png" mode=""></image>
								</view>
								<view class="content-ling-two-top-left-word d-cw">
									<text>购买商品</text>
									<text>购买商品可得对应积分</text>
								</view>
								<view class="content-ling-two-top-btn d-rn d-ac d-jc" :class="user_info.if_qiandao==1?'active':''"
									@click="toRoute('activity/jifenmall/jifenmall')">
									<text class="d-rn d-ac d-jc">去购买</text>
								</view>
							</view>
							<!-- <view class="content-ling-two-top-btn d-rn d-ac d-jc" @click="toRoute('invite/index')">
								<text class="d-rn d-ac d-jc">去邀请</text>
							</view> -->
						</view>

					</view>
				</view>

				<view class="mall-box">
					<view class="mall-title">
						积分商城
					</view>

				</view>
			</view>
		</view>

		<uni-load-more :status="status_load"></uni-load-more>
	</view>

</template>
<script>
	export default {
		components: {},
		data() {
			return {
				user_info: {},
				info: {},
				Today: '',
				list: [],
				params: {
					page: 1,
					pageNum: 10,
				},
				status_load: 'more',
				qdinfo: {
					qiandao_rule: {
						
					}
				},
				qiandao_rule: {
					
				},
				qdDays: ''
			}
		},
		onLoad() {
			let _self = this;
			this.Today = new Date().getDay()
			uni.showLoading({
				title: '加载中...',
				icon: 'none'
			})
			this.get_qiandaoinfo()
			this.get_info()
			this.get_list()





			this.query_user()
		},
		methods: {
			query_user() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'users_userInfo',
					},
				}).then(res => {
					if (res.code == 200) {
						this.user_info = res.data
					}
				})
			},


			qiandao(index) {
				this.$api({
						url: '/service.php',
						method: 'get',
						data: {
							action: 'jiFen_qiandao',
						},
					})
					.then(res => {
						this.$alert(res.message, () => {
							this.qdDays = res.days
							get_userInfo((data) => {
								this.user_info = data
								this.get_info()
							})
						})
					})

			},
			get_info() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'users_qiandaoWeek',
					},
				}).then(res => {
					let {
						data,
						code,
						message
					} = res
					this.info = data
				})
			},
			get_list() {
				this.status_load = 'loading'
				let params = this.params

				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'money_jifenPdts',
						...params
					},
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					let data = res.data
					if (data) {
						this.list = this.list.concat(data)
					}
					console.log(this.list, 'list--------')
					if (params.pagenum == data.length) {
						this.params.page += 1;
						this.status_load = 'more'
					} else {
						this.status_load = 'noMore'
					}
				})
			},
			get_qiandaoinfo() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'users_qdConfig',
					},
				}).then(res => {
					let {
						data,
						code,
						message
					} = res
					this.qdinfo = data
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.container {
		width: 100%;

		.topFixed {
			width: 100%;
			position: fixed;
			z-index: 60;
			left: 0;
			height: 160rpx;
			background: #EDC6AF;
			padding-top: 80rpx;
			box-sizing: border-box;
		}

		// 导航栏
		.topNav {
			width: 100%;
			box-sizing: border-box;
			position: relative;

			&-min {
				width: 100%;
				position: absolute;
				left: 0;
				padding: 0 20rpx;
				box-sizing: border-box;

				image {
					width: 20rpx;
					height: 32rpx;
					box-sizing: border-box;
					transform: rotate(-180deg);
				}

				text {
					display: block;
					font-size: 32rpx;
					font-weight: 500;
					color: #000000;
				}
			}
		}

		.content {
			width: 100%;
			position: relative;
			// background: linear-gradient(135deg, #FFDCCB 0%, #E2B89D 100%);
			/* background: #EDC6AF; */
			background: linear-gradient(180deg, #E6E7EE 0%, #E6E7EE 33%, rgba(246, 247, 251, 0) 100%);

			&-head {
				width: 100%;
				height: 288rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
				background: $color;

				&-left {
					padding-top: 48rpx;

					&-image {
						image {
							width: 100rpx;
							height: 100rpx;
							margin-right: 32rpx;
							border-radius: 50%;
						}
					}

					&-word {
						padding-top: 16rpx;

						text:nth-of-type(1) {
							font-size: 32rpx;
							font-weight: bold;
							color: #FFFFFF;

							text {
								font-weight: bold;
								color: #FF8D0B;
							}
						}

						text:nth-of-type(2) {
							font-size: 20rpx;
							color: #FFFFFF;
						}
					}
				}

				&-right {
					width: 176rpx;
					height: 64rpx;
					background: rgba(255, 255, 255, 0.16);
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					border: 2rpx solid #FFFFFF;
					margin-top: 60rpx;

					image {
						width: 36rpx;
						height: 40rpx;
					}

					text {
						font-size: 24rpx;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}

			.big {
				position: absolute;
				top: 71%;
				left: 5%;
				width: 90%;

				.content-ling {
					background-color: #FFFFFF;
					padding: 42rpx 24rpx;
					box-sizing: border-box;
					border-radius: 16rpx;
					margin-bottom: 24rpx;
					box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);

					&-title {
						text {
							font-size: 28rpx;
							font-weight: bold;
							color: $color;
						}
					}

					.lianxu {
						text {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
						}
					}

					&-list {
						margin-top: 42rpx;
						display: flex;
						flex-wrap: wrap;

						&-top {
							width: 146rpx;
							height: 182rpx;
							border-radius: 8rpx;
							margin-right: 12rpx;
							margin-bottom: 16rpx;

							&:nth-child(4n) {
								margin-right: 0;
							}

							text:nth-of-type(1) {
								font-size: 24rpx;
								color: #000000;
							}

							image {
								width: 35rpx;
								height: 36rpx;
								margin: 18rpx 0;
							}

							text:nth-of-type(2) {
								font-size: 20rpx;
								color: #76798D;
							}
						}

						.active {
							text:nth-of-type(1) {
								font-size: 24rpx;
								color: #FFFFFF;
							}

							text:nth-of-type(2) {
								font-size: 20rpx;
								color: #FFFFFF;
							}
						}

						&-one {
							width: 310rpx;
							height: 182rpx;

							&-left {
								text:nth-of-type(1) {
									font-size: 24rpx;
									color: #000000;
								}

								text:nth-of-type(2) {
									font-size: 20rpx;
									color: #698A95;
									margin-top: 18rpx;
								}

								text:nth-of-type(3) {
									font-size: 20rpx;
									color: #698A95;
									margin-top: 20rpx;
								}
							}

							&-right {
								margin-left: 70rpx;
								position: relative;

								image {
									width: 70rpx;
									height: 70rpx;
								}
							}
						}




						.active {
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							background: $color;
						}

						.outactive {
							background: #F6F7FB;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
						}
					}

					&-two {
						margin-top: 40rpx;

						&-top {
							margin-bottom: 80rpx;

							&:nth-last-of-type(1) {
								margin-bottom: 0rpx;
							}

							&-left {
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;

								&-image {
									margin-right: 32rpx;

									image {
										width: 80rpx;
										height: 80rpx;
									}
								}

								&-word {
									flex: 1;

									text:nth-of-type(1) {
										font-size: 28rpx;
										font-weight: bold;
										color: #000000;
									}

									text:nth-of-type(2) {
										font-size: 24rpx;
										color: #698A95;
									}
								}

							}

							&-btn {
								text {
									width: 146rpx;
									height: 56rpx;
									border-radius: 52rpx 52rpx 52rpx 52rpx;
									background: $color;
									font-size: 24rpx;
									color: #FFFFFF;
								}
							}
						}
					}

				}

				.mall-box {
					padding: 34rpx 24rpx;
					background: #FFFFFF;
					border-radius: 16rpx;

					.mall-title {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #000000;
						margin-bottom: 26rpx;
					}
				}
			}

		}
	}
</style>